<template>
  <div class="comment_contaienr">
    <!-- <van-nav-bar title="点评服务" left-text="返回" left-arrow @click-left="$router.go(-1)" /> -->
    <h4>服务评分</h4>
    <p>您的投诉建议已经处理完毕，请对我们的服务进行评价</p>
    <div class="rate_block">
      <!-- <van-rate
        v-model="postModel.satisfaction"
        size="35px"
        icon="like"
        allow-half
        void-icon="like-o"
      />-->
      <div class="picker_item" v-for="i of 5" :key="i" @click="activeIndex = i;postModel.satisfaction = i">
        <svg-icon v-show="activeIndex && activeIndex === i" :iconClass="i" />
        <svg-icon v-show="activeIndex !== i" :iconClass="'d-'+ i" />
        <span>{{i | filterText}}</span>
      </div>
    </div>

    <hr />

    <van-field
      v-model="postModel.content"
      rows="10"
      size="large"
      autosize
      type="textarea"
      placeholder="请输入本次对物业服务的评价..."
      show-word-limit
    />
    <!-- 图片上传区域 -->
    <div class="uploader_container">
      <van-uploader
        :after-read="afterRead"
        :before-delete="beforeDelete"
        @oversize="onOversize"
        :max-size="5 * 1024 * 1024"
        :max-count="3"
        v-model="fileList"
        upload-text="（最多三张）"
      />
    </div>

    <!-- 点击区域 -->
    <footer>
      <van-button color="#0a7aeb" size="large" @click="evaluateSure">提交评价</van-button>
    </footer>
  </div>
</template>

<script>
import { uploadFile, deleteUploadFileByFileId } from "@/api/base";
import { evaluateWorkOrder } from "@/api/comment";
export default {
  name: "OrderComment",
  filters: {
    filterText(count) {
      const countMap = {
        1: "很差",
        2: "差",
        3: "一般",
        4: "赞",
        5: "超赞"
      };
      return countMap[count];
    }
  },
  data() {
    return {
      fileList: [],
      imgList: [],
      activeIndex: 0,
      uploadData: {
        files: null,
        createGroupId: true,
        nsSystemFiles: null
      },
      postModel: {
        satisfaction: 0,
        content: "",
        fileGroupId: ""
      }
    };
  },
  methods: {
    afterRead(file) {
      console.log("afterRead -> file", file);
      // this.postModel.fileGroupId =
      const trueFile = file.file;
      this.uploadData.files = trueFile;
      this.uploadData.createGroupId =
        this.postModel.fileGroupId.length > 0 ? false : true;
      // 这里为了区别第一次和第零次上传
      this.uploadData.nsSystemFiles = JSON.stringify([
        this.uploadData.createGroupId
          ? {
              fileName: trueFile.name
            }
          : {
              fileName: trueFile.name,
              groupId: this.postModel.fileGroupId
            }
      ]);
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true
      });
      const formData = new FormData();
      // formData.append("files", trueFile);
      formData.append("files", this.uploadData.files);
      formData.append("createGroupId", this.uploadData.createGroupId);
      formData.append("nsSystemFiles", this.uploadData.nsSystemFiles);
      uploadFile(formData)
        .then(res => {
          // console.log("afterRead -> res", res);
          this.postModel.fileGroupId = res[0].groupId;
          this.imgList.push({
            url: res[0].fileFullPath,
            fileId: res[0].fileId
          });
        })
        .finally(() => {
          this.$toast.clear();
        });

      // .fially(this.$toast.clear());
    },
    beforeDelete(file, detail) {
      // console.log("beforeDelete -> file, detail", file, detail)
      deleteUploadFileByFileId({
        fileId: this.imgList[detail.index].fileId
      })
        .then(() => {
          // this
          this.imgList.splice(detail.index, 1);
          this.fileList.splice(detail.index, 1);
          this.$toast.success("删除成功");
          return true;
        })
        .catch(() => {
          return false;
        });
    },
    onOversize() {
      this.$toast.fail("图片过大");
    },
    evaluateSure() {
      evaluateWorkOrder(this.postModel).then(() => {
        this.$toast.success("评价成功！");
        this.$router.go(-1);
      });
    }
  }
};
</script>

<style lang="less" scoped>
h4 {
  // font-weight: normal;
  // text-align: center;
  line-height: 50px;
  text-indent: 20px;
}
p {
  font-size: 14px;
  text-indent: 20px;
  color: @default-dark;
}
hr {
  height: 1px;
  background-color: #f5f5f5;
  transform: scaleY(0.2);
}
.comment_contaienr {
  margin-top: 10px;
  background-color: #fff;
  height: 100%;
  .rate_block {
    display: flex;
    width: 100%;
    margin: 20px auto;

    justify-content: space-around;
    // margin: 10px 0;
    .picker_item {
      display: flex;
      flex-flow: column wrap;
      align-items: center;
      font-size: 30px;
      span {
        display: inline-block;
        margin-top: 8px;
        font-size: 14px;
      }
    }
  }
  .uploader_container {
    margin: 10px 15px;
  }
  /deep/ .van-field__control {
    background-color: #f5f5f5;
    padding: 10px;
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 5%;
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 10px 0;
  }
}
</style>